<template>
  <n-form ref="formInstance" v-model="formData">


    <n-tabs default-value="api" size="large" justify-content="space-evenly">
      <n-tab-pane name="api" tab="从接口导入">
        <n-input v-model:value="formData.url" type="textarea" placeholder="请输入api地址" />
        <p>请输入服务端可访问的在线openhttpApi地址</p>
      </n-tab-pane>
      <n-tab-pane name="text" tab="从文本导入">
        <n-input type="textarea" v-model:value="formData.text" placeholder="请输入文本地址" />
        <p>请输入完整拷贝openhttpApi描述文件</p>
      </n-tab-pane>
      <n-tab-pane name="file" tab="从文件导入">
        <n-button @click="onSelectFile">点击选择文件</n-button>
        <p>已选择{{ formData.fileName }}</p>
      </n-tab-pane>
    </n-tabs>
  </n-form>
</template>
<script lang="ts">
import { checkFormData } from "@/utils/formUtil";
import httpApi from "./httpApi";
import { ref } from "vue";
import { FormInst } from "naive-ui";
import { Layer } from "slash-layer";

export default {
  setup() {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      file: 0,
      url: "",
      text: "",
      fileName: "暂未选择文件"
    });
    const doSubmit = async () => {
      await checkFormData(formInstance);
      console.log("表单内容",formData);
      return httpApi.doResolvingSwaggerData([formData.value.file], formData.value.url, formData.value.text);
    };
    const onSelectFile = async () => {
      const files: [any] = await Layer.selectFile({
        accept: ".json"
      } as any);
      formData.value.file = files[0];
      formData.value.fileName = files[0].name;
    };
    return {
      onSelectFile,
      formInstance,
      formData,
      doSubmit
    };
  }
};
</script>
